<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prop进行组件之间的数据传递</title>
</head>

<body>
    <div id="app">
        {{msg}}
        <input type="text" v-model="name" />
        <input type="text" v-model="age" />
        <main-componet name="张三" age="18"></main-componet>
        <main-componet :name="name" :age="age"></main-componet>
    </div>
</body>

</html>
<script type="module">
    import { } from './js/vue.js';
    //展示组件
    let mainComponet = {
        template: "<div><h1>欢迎:{{name}}  年龄:{{age}} ,进入云尚台球厅</h1></div>",
        props: ['name', 'age'], //props作用  用来接受使用组件时通过组件标签传递的数据
    }

    new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            name: "土鸡",
            age: "21",
        },
        components: {
            mainComponet,
        },
        props: {

        }
    })
</script>